<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>11.实现基于动态路由的静态生成</title>
</head>

<body>
    <div>
        <h1>基于动态路由的静态生成</h1>
        <p>基于参数为页面组件生成HTML页面，有多少参数就生成多少HTML页面</p>
        <p>在构建应用时，先获取用户可以访问的所有路由参数，在根据路由参数获取具体数据，然后根据数据产生静态HTML</p>
    </div>
    <div>
        <h1>实现基于动态路由的静态生成</h1>
        <p>1.创建基于动态路由的页面组件文件，命名时在文件名称外面加上[]，比如[id].js</p>
        <p>2.导出异步函数 getStaticPaths , 用于获取所有用户可以访问的路由参数</p>
        <p>3.导出异步函数 getStaticProps , 用于根据路由参数获取具体的数据</p>
    </div>
    <div>
        getStaticPaths和getStaticProps只运行在服务器端，永远不会运行在客户端，甚至不会被打包到客服端JavaScript中，意味着这里可以随意写服务端代码，比如查询数据库
    </div>
</body>

<script>
    export async function getStaticPaths() {
        // 此处获取所有用户可以访问的路由参数
        return {
            // 返回固定格式的路由参数
            paths: [{
                params: {
                    id: 1
                }
            }, {
                params: {
                    id: 2
                }
            }],
            // 当用户访问的路由参数没有在当前函数中返回时，是否显示404页面，false显示，true不显示
            fallback: false
        }
    }

    export async function getStaticProps({
        params
    }) {
        // params -> {id:1}
        // 此处根据路由参数获取具体数据
        return {
            props: {}
        }
    }
</script>

</html>